<link rel="stylesheet" href="/css/parsley/parsley.css"/>
<link rel="stylesheet" href="/css/sweetalert/sweetalert.css"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=1.2.0"/>
<link rel="stylesheet" type="text/css" href="/css/editor.min.css?v=1.1.0"/>
<link rel="stylesheet" href="/farbtastic/farbtastic.css" type="text/css" />
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>自动回复消息</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{route('/')}}"></a>
            </li>
            <li>
                @if ($edit_mode == 1)
                <strong>编辑图文消息</strong>
                @else
                <strong>新建图文消息</strong>
                @endif
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a href="{{route('menu.index')}}" class="btn btn-primary newmenu">返回图文消息列表</a>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRightBig">
    <div class="row" style="background: url(/image/mobile-warp.png) 16px 0 no-repeat">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <!--主题内容-->
                <div class="row">
                    <div class="editor-preview-wrap col-md-6" >
                        <div class="active-arrow" style="top:150px;" ></div>
                        <div class="editor-preview" >
                            <div class="preview-items" >
                                <div class="msg-item" >
                                    <img class="cover" src="">
                                    <span class="cover-empty-tips" >缩略图</span>
                                    <h4></h4>

                                    <div class="operate">
                                        <i class="fa fa-eye"></i>
                                        <i class="fa fa-pencil"></i>
                                        <i class="fa fa-trash"></i>
                                    </div>
                                    <input type="hidden" class="author" />
                                    <input type="hidden" class="title"/>
                                    <input type="hidden" class="digest"/>
                                    <input type="hidden" class="show_cover_pic"/>
                                    <input type="hidden" class="content"/>
                                    <input type="hidden" class="content_source_url"/>
                                    <input type="hidden" class="thumb_media_id"/>
                                </div>
                                <!--后添加-->
                                <div class="msg-item editing" >
                                    <img class="cover" src="">
                                    <span class="cover-empty-tips">缩略图</span>
                                    <h4></h4>

                                    <div class="operate"><i class="fa fa-eye"></i>
                                        <i class="fa fa-pencil"></i>
                                        <i class="fa fa-trash"></i>
                                    </div>
                                    <input type="hidden" class="author" />
                                    <input type="hidden" class="title"/>
                                    <input type="hidden" class="digest"/>
                                    <input type="hidden" class="show_cover_pic"/>
                                    <input type="hidden" class="content"/>
                                    <input type="hidden" class="content_source_url"/>
                                    <input type="hidden" class="thumb_media_id"/>
                                </div>
                                <div class="msg-item editing" >
                                    <img class="cover" src="">
                                    <span class="cover-empty-tips">缩略图</span>
                                    <h4></h4>

                                    <div class="operate"><i class="fa fa-eye"></i>
                                        <i class="fa fa-pencil"></i>
                                        <i class="fa fa-trash"></i>
                                    </div>
                                    <input type="hidden" class="author" />
                                    <input type="hidden" class="title"/>
                                    <input type="hidden" class="digest"/>
                                    <input type="hidden" class="show_cover_pic"/>
                                    <input type="hidden" class="content"/>
                                    <input type="hidden" class="content_source_url"/>
                                    <input type="hidden" class="thumb_media_id"/>
                                </div>

                            </div>
                            <!--添加按钮-->
                            <div class="editor-add" >
                                <span class="editor-add-btn">
                                    <i class="fa fa-plus"></i>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="col-md-6 col-md-offset-1 right-content" >

                        <div class="form-wrap">
                            <div class="form-group only-normal" >
                                <label for="exampleInputEmail1">标题：</label>
                                <input class="form-control" name="title" value="" type="text">
                            </div>
                            <div class="form-group only-normal" >
                                <label for="exampleInputEmail1">
                                    <span>作者：</span>
                                    <span class="text-muted">（选填）</span>
                                </label>
                                <input class="form-control" name="author" value="" type="text" >
                            </div>
                            <div class="form-group only-normal" >
                                <label for="exampleInputEmail1">
                                    <span>封面：</span><span class="text-muted">
                                        <span>（</span>
                                        <span>大图片建议尺寸：900像素*500像素 格式：png、gif、jpg</span>
                                        <span>）</span>
                                    </span>
                                </label>

                                <div class="form-cover">
                                    <div class="upload-wrap">
                                        <span class="btn btn-primary fileinput-button" >
                                            <i class="fa fa-upload"></i>
                                            <span>&nbsp;上 传</span>
                                            <label for="cover_file" class="fileinput-file"> </label>
                                        </span>
                                    </div>
                                    <span></span>
                                </div>
                                <div class="form-checkbox">
                                    <div class="checkbox">
                                        <i class="fa fa-square-o"></i>
                                        <span> 封面图片显示在正文中</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group only-normal" >
                                <label for="exampleInputEmail1">
                                    <span>摘要：</span>
                                    <span class="text-muted">（选填，该摘要只在发送图文消息为单条时显示）</span>
                                </label>
                                <textarea class="form-control digest"></textarea>
                            </div>
                            <div class="form-content-wrap" style="height:auto;">

                                <textarea class="content-wrap" id="editor" type="text/plain"></textarea>
                            </div>
                            <div class="form-group only-normal">
                                <label for="exampleInputEmail1">
                                    <span>原文链接：</span>
                                    <span class="text-muted">（选填）</span>
                                </label>
                                <input class="form-control" name="sourceurl" value="" type="text">
                            </div>
                            <div class="form-group only-normal operate-btns">
                                <button class="btn btn-primary">保存当前素材</button>
                                <button class="btn btn-danger">同步所有图文到微信</button>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<!--<script src="/js/parsley/parsley.min.js?t={{time()}}"></script>-->
<!--<script src="/js/parsley/parsley.extend.js?t={{time()}}"></script>-->
<!--<script src="/js/jqForm/jquery.form.min.js?t={{time()}}"/>-->
<!--<script src="/js/sweetalert/sweetalert.min.js?t={{time()}}"></script>-->
<!--<script src="/js/parsley/zh_cn.js?t={{time()}}"></script>-->
<!--百度编辑器-->
<!--<script src="/ueditor/jquery-1.10.2.min.js"></script>-->
<!--<script src="/ueditor/ueditor.config.js?t={{time()}}"></script>-->
<!--<script src="/ueditor/lang/zh-cn/zh-cn.js?t={{time()}}"></script>-->
<!--<script src="/ueditor/ueditor.all.js?t={{time()}}"></script>-->

<script>console.log('load me!!!son of bitch!')</script>

<script data-exec-on-popstate>

var SITE_PUBLIC = SITE_PUBLIC || '/';
var EditorCustom=window.EditorCustom||{};
    $(function() {

        //UE.getEditor('editor');
        //实例化编辑器
        var editor = new UE.ui.Editor({
            autoHeightEnabled: true,
            autoFloatEnabled: true,
            zIndex: 999,
            initialFrameHeight: 340,
            initialFrameWidth:485,
            toolbars: [[
                'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',

                'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'map',  'pagebreak',  'background', '|',
                'horizontal',  'spechars',  '|',

                 'searchreplace','||'
            ]]
        });

        // 自定义按钮

        // 关注引导
        UE.registerUI('fork', function(editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
//            editor.registerCommand(uiName, {
//                execCommand: function() {
//                    alert('execCommand:' + uiName)
//                }
//            });
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(0);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '关注引导样式',
                //添加额外样式,指定icon图标,这里默认使用一个重复的icon
                cssRules: 'width:61px!important;background:url(/ueditor/themes/default/images/icons.png) -928px -0px;',
                //点击时执行的命令
                onclick: function() {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });
            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function() {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //因为你是添加button,所以需要返回这个button
            return btn;
        });

        //标题
        UE.registerUI('title', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(1);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '标题区样式',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -887px -0px;width:39px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });


        //内容
        UE.registerUI('con', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(2);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '内容区样式',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -836px -0px;width:48px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });

        //互推
        UE.registerUI('hutui', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(3);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '互推',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -836px -45px;width:62px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });

        //分割
        UE.registerUI('division', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(4);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '分割线样式',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -903px -22px;width:50px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });


        //原文引导
        UE.registerUI('guide', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(5);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '引导阅读样式',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position: -836px -22px;width:62px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });

        //其他
        UE.registerUI('other', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(6);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '其他样式',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position:-955px -22px;width:41px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });

        //我的样式
        UE.registerUI('mystyle', function (editor, uiName) {
            //注册按钮执行时的command命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function () {
                    EditorCustom.renderCon(7);
                }
            });
            //创建一个button
            var btn = new UE.ui.Button({
                //按钮的名字
                name: uiName,
                //提示
                title: '其他样式',
                //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
                cssRules: 'background-position:-902px -45px;width:63px!important;height:20px!important;',
                //点击时执行的命令
                onclick: function () {
                    //这里可以不用执行命令,做你自己的操作也可
                    editor.execCommand(uiName);
                }
            });

            //当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            //返回这个button
            return btn;
        });

        // 渲染编辑器
        editor.render("editor");

        /**
         * 显示保存信息
         * @type {*}
         */
        var ue = UE.getEditor('editor');
        ue.ready(function() {
            ue.setContent('<p>hello!</p>');
        });


        /**
         * 图文预览图部分
         * todo
         */
        var newsbox = {};

        $('.editor-add-btn').on('click', function() {
            console.log('add a news');
        });

        // 编辑
        $('.fa-pencil').on('click', function() {
            console.log('edit');
            // 切换当前作用对象
            newsbox = $(this);

            // 加载已填写的记录

            $('input[name=title]').on('keyup', function() {
                var title = $('input[name=title]').val();
                newsbox.parent().parent().find('h4').html(title);
                newsbox.parent().parent().find('.title').val(title);
            });
//            $('input[name=author]').on('keyup', function() {
//                var author = $('input[name=author]').val();
//                newsbox.parent().parent().find('.author').val(author);
//            });
//            $('textarea.digest').on('keyup', function() {
//                var digest = $('textarea.digest').val();
//                newsbox.parent().parent().find('.digest').val(digest);
//            });


            //newsbox.parent().parent().find('h4').html('abc');
        });

        // 删除
        $('.fa-trash').on('click', function() {
            console.log('delete');
        });

        // 预览
        $('.fa-eye').on('click', function() {
            console.log('preview');
        });
    })

    EditorCustom.renderCon = function(num) {
        //随机数，防止请求缓存
        var date = Date.now();
        //获取iframe中html，填充到win.alert的content中
        var wxStyle = Win.alert({
            title: '宜人贷在线微信样式',
            width: 842,
            url: SITE_PUBLIC + 'weixinStyles',
            callback: function () {
                //判断显示当前点击的tab内容
                var J_tab = $(".J_tab li").eq(num),
                    J_pannel = $(".J_pannel .tab-pane").eq(num);

                if (J_tab.prop("class") !== "active") {
                    J_tab.addClass('active')
                    J_tab.siblings().removeClass('active')
                } else {
                    J_tab.siblings().removeClass('active')
                }

                if (J_pannel.prop("class") !== "active in") {
                    J_pannel.addClass('active in')
                    J_pannel.siblings().removeClass('active in')
                } else {
                    J_pannel.siblings().removeClass('active in')
                }

                //实例化取色器
                var t = $.farbtastic("#titPic"), //标题区取色器
                    f = $.farbtastic("#picker"), //内容区取色器
                    h = $.farbtastic("#htPic"); //互推区取色器

                //标题区取色器
                function titleColor() {
                    t.linkTo(function () {
                        $("#colorOne").css({'border-color': this.color, 'border-width': "1px"}).val(this.color)
                        if ($(".selectedStyleoOne .bkcolor")) {
                            $(".selectedStyleoOne .bkcolor").css('background-color', arguments[0])
                        }
                        if ($(".selectedStyleoOne .brcolor")) {
                            $(".selectedStyleoOne .brcolor").css('border-color', arguments[0])
                        }
                        if ($(".selectedStyleoOne .bfcolor")) {
                            $(".selectedStyleoOne .bfcolor").css({'border-color': arguments[0], 'color': arguments[0]})
                        }
                        if ($(".selectedStyleoOne .btcolor")) {
                            val = arguments[0] + " transparent";
                            $(".selectedStyleoOne .btcolor").css('border-color', val)
                        }
                    });
                    $("#colorOne").keyup(function (event) {
                        var reg = new RegExp("#", "g");
                        var color = $(this).val().replace(reg, "");
                        t.setColor("#" + color);
                    });
                }

                titleColor();

                //内容区取色器
                function conColor() {
                    f.linkTo(function () {
                        $("#colorTwo").css({'border-color': this.color, 'border-width': "1px"}).val(this.color)
                        if ($(".selectedStyle .bkcolor")) {
                            $(".selectedStyle .bkcolor").css('background-color', arguments[0])
                        }
                        if ($(".selectedStyle .brcolor")) {
                            $(".selectedStyle .brcolor").css('border-color', arguments[0])
                        }
                        if ($(".selectedStyle .bfcolor")) {
                            $(".selectedStyle .bfcolor").css({'border-color': arguments[0], 'color': arguments[0]})
                        }

                        if ($(".selectedStyle .btcolor")) {
                            value = arguments[0] + ' transparent';
                            $(".selectedStyle .btcolor").css('border-color', value)
                        }

                    });
                    $("#colorTwo").keyup(function (event) {
                        var reg = new RegExp("#", "g");
                        var color = $(this).val().replace(reg, "");
                        f.setColor("#" + color);
                    });
                }

                conColor();

                //互推区取色器
                function hutuiColor() {
                    h.linkTo(function () {
                        $("#colorThree").css({'border-color': this.color, 'border-width': "1px"}).val(this.color)
                        if ($(".selectedStyleoTwo .bkcolor")) {
                            $(".selectedStyleoTwo .bkcolor").css('background-color', arguments[0])
                        }
                        if ($(".selectedStyleoTwo .brcolor")) {
                            $(".selectedStyleoTwo .brcolor").css('border-color', arguments[0])
                        }
                        if ($(".selectedStyleoTwo .bfcolor")) {
                            $(".selectedStyleoTwo .bfcolor").css({'border-color': arguments[0], 'color': arguments[0]})
                        }

                    });
                    $("#colorThree").keyup(function (event) {
                        var reg = new RegExp("#", "g");
                        var color = $(this).val().replace(reg, "");
                        h.setColor("#" + color);
                    });

                }

                hutuiColor();

                //如果是我的样式tab
                function MyStyle() {

                    //判断是否已经实例化，有就销毁
                    if (!EditorCustom.ueMyStyle == "") {
                        EditorCustom.ueMyStyle.destroy()
                    }

                    //初始化编辑器
                    EditorCustom.ueMyStyle = UE.getEditor('editorTwo', {
                        toolbars: [
                            [
                                'source', 'undo', 'redo',
                                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'autotypeset', 'blockquote', 'pasteplain', 'forecolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', 'rowspacingtop', 'rowspacingbottom', 'lineheight', 'indent',
                                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'touppercase', 'tolowercase', 'simpleupload', 'date', 'time'
                            ],
                            [
                                'con', 'title', 'fork', 'guide', 'division', 'other', 'mystyle'
                            ]
                        ],
                        autoHeightEnabled: false,
                        allowDivTransToP: false,
                        autoFloatEnabled: true,
                        enableAutoSave: false
                    });

                    var listData = JSON.parse(localStorage.getItem("mystyleData"));

                    if (listData) {
                        $.each(listData, function (index, val) {
                            $(".J_myStyleList").append(val)
                        });
                        $("#J_styleChoseBox").html($(".J_myStyleList li .content").eq(0).html())
                        $(".no-material").hide();
                        $(".J_styleList").show();
                    }

                    //点击添加样式，隐藏列表，显示添加界面
                    $(".J_addStyleBtn").click(function (event) {
                        $(".J_uploadStyle").show();
                        $(".J_addStyleBox").hide();
                        //清空数据
                        $(".J_uploadStyle .upload-prev-area").html("");
                        EditorCustom.ueMyStyle.execCommand('cleardoc');
                    });

                    //取消返回样式列表页面
                    $(".J_caeStyleBtn").click(function (event) {
                        $(".J_uploadStyle").hide();
                        $(".J_addStyleBox").show();
                    });

                    //提交按钮
                    $(".J_subStyleBtn").click(function (event) {

                        //遍历上传的图片，插入到列表,本地存储
                        mystyleData = [];
                        $.each($(".J_uploadStyle .upload-prev-area li"), function (index, val) {

                            imgsrc = $(this).find('img').attr("src");
                            var html = '<li><div class="content"><p><img src="' + imgsrc + '" style="HEIGHT: auto !important; WIDTH: auto"></p></div><span class="J_delStyleBtn">删除</span></li>';

                            $(".J_myStyleList").append(html)
                            mystyleData.push(html)
                        });

                        //获取编辑器里面的内容，插入列表
                        if (EditorCustom.ueMyStyle.hasContents()) {
                            var mystyleContent = '<li><div class="content">' + EditorCustom.ueMyStyle.getContent() + '</div><span class="J_delStyleBtn">删除</span></li>'
                            $(".J_myStyleList").append(mystyleContent);
                            mystyleData.push(mystyleContent)
                        }

                        //隐藏添加界面，显示列表页面
                        $(".J_uploadStyle").hide();
                        $(".J_addStyleBox").show();

                        //添加样式按钮显示隐藏
                        $(".no-material").hide();
                        $(".J_styleList").show();

                        //如果有本地数据，就先取出，在加上现有数据，再保存，没有就直接保存

                        if (listData) {
                            endData = [];
                            $.each($(".J_myStyleList li"), function (index, val) {
                                var saveList = '<li>' + $(val).html() + '</li>';
                                endData.push(saveList);
                            });
                            localStorage.setItem("mystyleData", JSON.stringify(endData));
                        } else {
                            localStorage.setItem("mystyleData", JSON.stringify(mystyleData));
                            listData = JSON.parse(localStorage.getItem("mystyleData"));
                        }

                        //设置默认数据，下方的选择框
                        $("#J_styleChoseBox").html($(".J_myStyleList li .content").eq(0).html());
                    });
                    //点击选择样式到下方
                    $(".J_addStyleBox").on('click', 'li', function (event) {
                        $(this).addClass('hover').siblings().removeClass('hover');
                        var html = $(this).find(".content").html();
                        $(this).parents(".borderBox").next().html(html);
                    });
                    //删除功能
                    $(".J_addStyleBox").on('click', '.J_delStyleBtn', function (event) {
                        var target = this;
                        if ($(".J_myStyleList li").length == 1) {
                            $(target).parent().remove();
                            $("#J_styleChoseBox").html($(".J_myStyleList li .content").eq(0).html());
                            localStorage.removeItem("mystyleData");
//                            localData.remove("mystyleData")
                            $(".J_styleList").hide();
                            $(".no-material").show();
                        } else {
                            $(target).parent().remove();//删除
                            $("#J_styleChoseBox").html($(".J_myStyleList li .content").eq(0).html());
                            //重置数据
                            endDataOne = [];
                            $.each($(".J_myStyleList li"), function (index, val) {
                                var saveList = '<li>' + $(val).html() + '</li>';
                                endDataOne.push(saveList);
                            });
                            localStorage.setItem("mystyleData", JSON.stringify(endDataOne));
                        }
                    });
                    //上下移动
                    $("#J_sortStyle").sortable({
                        axis: 'y',
                        revert: false,
                        placeholder: "ui-state-highlight",
                        items: "li",
                        scroll: false
                    }).bind('sortstop', function (event, ui) {
                        endData = [];
                        $.each($(".J_myStyleList li"), function (index, val) {
                            var saveList = '<li>' + $(val).html() + '</li>';
                            endData.push(saveList);
                        });
                        localStorage.setItem("mystyleData", JSON.stringify(endData));
                        //设置默认数据，下方的选择框
                        $("#J_styleChoseBox").html($(".J_myStyleList li .content").eq(0).html());
                    });

                    //禁止选中元素被选中
                    $("#J_sortable").disableSelection();
                }

                MyStyle();

                //点击样式选择时,把选中的样式填充到下方div中
                $(".J_wxStyle li").click(function () {
                    $(this).addClass('hover').siblings().removeClass('hover');
                    var html = $(this).html();
                    $(this).parents(".borderBox").next().html(html);

                    conColor();

                    titleColor();

                    hutuiColor();
                })
                //点击确定按钮，把样式添加到编辑框中
                $(".J_conBtn").click(function () {
                    UE.getEditor('editor').execCommand('inserthtml', $(this).prev().html());
                    wxStyle.modal('hide');
//                    if(callback){
//                        callback();
//                    }
                })
            }
        })
    };




</script>